<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
	  <text class="navbar-title">个人系统</text>
	  <text class="navbar-actions"><uni-easyinput v-model="formData.gps"></uni-easyinput></text>
        <button class="navbar-btn" @click="navigateToFeedback">
          <uni-icons type="help" size="30" color="#666"></uni-icons>
        </button>
    </view>
	  
    <!-- 主内容区 -->
    <view class="main-content">
      <!-- 用户信息卡片 -->
      <view class="user-card" v-if="user">
        <image class="user-avatar" :src="user.avatar || '/static/default-cover.jpg'"></image>
        <text class="user-name">欢迎 {{ user.titlename || '用户' }}，{{ getRoleName(user.role) }}</text>
		<button class="user-out"  @click="handleLogout">退出</button>
      </view>
		
      <!-- 功能菜单 -->
      <view class="menu-grid">
        <view class="menu-item" @click="navigateToWorkOrder">
          <view class="menu-icon">
			<uni-icons type="calendar" size="28" color="#4a8cff"></uni-icons>
          </view>
          <text class="menu-text">工单系统</text>
        </view>

        <view class="menu-item" @click="navigateTocontainerOrder">
          <view class="menu-icon">
            <uni-icons type="list" size="28" color="#4a8cff"></uni-icons>
          </view>
          <text class="menu-text">箱号系统</text>
        </view>
        
        <view class="menu-item" @click="navigateToYardOrder">
          <view class="menu-icon">
            <uni-icons type="list" size="28" color="#4a8cff"></uni-icons>
          </view>
          <text class="menu-text">堆场系统</text>
        </view>
        
        <view class="menu-item" @click="navigateTofactoryOrder">
          <view class="menu-icon">
            <uni-icons type="shop-filled" size="28" color="#4a8cff"></uni-icons>
          </view>
          <text class="menu-text">工厂系统</text>
        </view>
        
        <view class="menu-item" @click="navigateTovideoOrder">
          <view class="menu-icon">
            <uni-icons type="list" size="28" color="#4a8cff"></uni-icons>
          </view>
          <text class="menu-text">视频系统</text>
        </view>

        <view class="menu-item" @click="navigateTomusics">
          <view class="menu-icon">
            <uni-icons type="headphones" size="28" color="#4a8cff"></uni-icons>
          </view>
          <text class="menu-text">音乐系统</text>
        </view>

        <view class="menu-item" @click="navigateToSettings">
          <view class="menu-icon">
            <uni-icons type="gear" size="28" color="#4a8cff"></uni-icons>
          </view>
          <text class="menu-text">系统设置</text>
        </view>
		
		<view class="menu-item" @click="navigateTouserinfo">
		  <view class="menu-icon">
			<uni-icons type="person-filled" size="28" color="#4a8cff"></uni-icons>
		  </view>
		  <text class="menu-text">个人资料</text>
		</view>
		
      </view>
		  
		  
      <!-- 快捷操作 -->
      <view class="quick-actions">
        <text class="section-title">快捷操作</text>
        <view class="action-buttons">
			
	      <button class="action-btn" @click="getLocation">
            <uni-icons type="plus" size="16" color="#fff"></uni-icons>
            获取位置
          </button>
          <button class="action-btn" @click="scanQRCode">
            <uni-icons type="scan" size="16" color="#fff"></uni-icons>
            扫码查询
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniEasyinput from '@dcloudio/uni-ui/lib/uni-easyinput/uni-easyinput.vue';
export default {
	components: {
	    uniEasyinput
	  },
  data() {
    return {
		formData: {
		    gps: '',
		},
		user: {}, // 初始化用户数据
		isLoggedIn: false // 登录状态标志
    };
  },
  onLoad() {
	  this.user = uni.getStorageSync('user');
	  if (!this.user) {
	    uni.switchTab({
	      url: '/pages/user/login'
	    });
	  }
    this.checkLoginStatus();
  },
  onShow() {
    // 每次页面显示时检查登录状态
    this.checkLoginStatus();
  },
  methods: {
    checkLoginStatus() {
        try {
          const user = uni.getStorageSync('user');
          if (user && user.id) {
            this.user = user;
            this.isLoggedIn = true;
            if (this.$store) {
              this.$store.commit('setUser', user);
            }
            return true;
          }
          this.redirectToLogin();
          return false;
        } catch (e) {
          console.error('检查登录状态失败:', e);
          this.redirectToLogin();
          return false;
        }
      },
    
    redirectToLogin() {
	  uni.showToast({
	    title: '请先登录',
	    icon: 'none'
	  });
      // 跳转到登录页
      uni.switchTab({
        url: '/pages/user/login'
      });
    },
    
    // 所有导航方法都加上登录检查
    navigateToFeedback() {
      if (!this.isLoggedIn) return this.redirectToLogin();
      uni.navigateTo({
        url: '/pages/feedback/feedback'
      });
    },
    
    navigateToWorkOrder() {
          if (!this.checkLoginStatus()) {
            uni.showToast({
              title: '请先登录',
              icon: 'none'
            });
            return;
          }
          
          uni.navigateTo({
            url: '/pages/work/list',
            
            fail: (err) => {
              console.error('导航失败:', err);
              uni.showToast({
                title: '无法打开工单系统',
                icon: 'none'
              });
              // 备用方案：跳转到首页或其他页面
              uni.switchTab({
                url: '/pages/index/index'
              });
            }
          });
        },
    
    navigateTovideoOrder() {
      if (!this.isLoggedIn) return this.redirectToLogin();
      uni.navigateTo({
        url: '/pages/videos/upload'
      });
    },
	
	navigateTouserinfo() {
	    if (!this.isLoggedIn) return this.redirectToLogin();
	    uni.navigateTo({
	      url: '/pages/user/info'
	    });
	},
    
    navigateTofactoryOrder() {
      if (!this.isLoggedIn) return this.redirectToLogin();
      uni.navigateTo({
        url: '/pages/factory/factory'
      });
    },
    
    navigateToYardOrder() {
      if (!this.isLoggedIn) return this.redirectToLogin();
      uni.navigateTo({
        url: '/pages/yard/yard'
      });
    },
    
    navigateTocontainerOrder() {
      if (!this.isLoggedIn) return this.redirectToLogin();
      uni.navigateTo({
        url: '/pages/container/container'
      });
    },
    
    navigateTomusics() {
		if (!this.checkLoginStatus()) {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			});
			return;
	    }
	    
	    uni.navigateTo({
			url: '/pages/musics/index',
			  
			fail: (err) => {
				console.error('导航失败:', err);
				uni.showToast({
					title: '无法打开工单系统',
					icon: 'none'
				});
				// 备用方案：跳转到首页或其他页面
				uni.switchTab({
					url: '/pages/user/login'
				});
			}
	    });
	},
     
    
    navigateToSettings() {
      if (!this.isLoggedIn) return this.redirectToLogin();
      uni.navigateTo({
        url: '/pages/settings/index'
      });
    },
    
    quickCreateOrder() {
      if (!this.isLoggedIn) return this.redirectToLogin();
      uni.navigateTo({
        url: '/pages/work/create'
      });
    },
    getLocation() {
      uni.getLocation({
        type: 'gcj02', // 优先尝试GCJ02
        success: (res) => {
          this.formData.gps = `纬度: ${res.latitude}, 经度: ${res.longitude}`;
          uni.showToast({
            title: '位置获取成功',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error('获取位置失败(GSJ02)，尝试WGS84:', err);
          // 回退方案：尝试WGS84
          uni.getLocation({
            type: 'wgs84',
            success: (res) => {
              this.formData.gps = `纬度: ${res.latitude}, 经度: ${res.longitude}`;
              uni.showToast({
                title: '位置获取成功(WGS84)',
                icon: 'success'
              });
            },
            fail: (err) => {
              uni.showToast({
                title: '位置获取失败',
                icon: 'none'
              });
            }
          });
        }
      });
    },
    scanQRCode() {
      if (!this.isLoggedIn) return this.redirectToLogin();
      
      // 检查当前运行环境
      if (uni.canIUse('scanCode')) {
        uni.scanCode({
          success: (res) => {
            console.log('扫码结果:', res);
            this.handleScanResult(res.result);
          },
          fail: (err) => {
            console.error('扫码失败:', err);
            uni.showToast({
              title: '扫码失败: ' + (err.errMsg || '未知错误'),
              icon: 'none'
            });
          }
        });
      } else {
        uni.showToast({
          title: '当前环境不支持扫码',
          icon: 'none'
        });
      }
    },
    handleLogout() {
      uni.removeStorageSync('user');
      uni.switchTab({
        url: '/pages/user/login'
      });
    },
	getRoleName(role) {
	  const roles = {
	    1: '管理员',
	    2: '操作员',
	    3: '查看员'
	  };
	  return roles[role] || '未知角色';
	},
    handleScanResult(result) {
      if (!this.isLoggedIn) return this.redirectToLogin();
      // 根据扫码结果进行不同处理
	  this.formData.gps = '扫码结果:', result;
      console.log('扫码结果:', result);
    }
  }
};
</script>

<style>
/* 导航栏样式 */
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5rpx 5rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.navbar-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}
.navbar-actions {
   flex: 1;  /* 占据剩余空间 */
   margin: 0 20rpx;
}
.navbar-actions .uni-easyinput {
  width: 100%;  /* 输入框充满父容器 */
}
.navbar-btn {
  margin: 0 1px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: #00f;
  display: inline-flex;      /* 或 inline-block */
  justify-content: center;   /* 水平居中（Flex适用） */
  align-items: center;       /* 垂直居中（Flex适用） */
  text-align: center;        /* 水平居中（inline-block适用） */
  padding: 0; 
}
/* 主内容区 */
.main-content {
  padding: 30rpx;
}
/* 用户卡片 */
.user-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
.user-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.user-name {
  font-size: 32rpx;
  color: #333;
}
.user-out {
  font-size: 32rpx;
  color: #333;
  margin-right: 5px;
}
/* 菜单网格 */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-bottom: 40rpx;
}
.menu-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
.menu-icon {
  margin-bottom: 15rpx;
}
.menu-text {
  font-size: 28rpx;
  color: #333;
}
/* 快捷操作 */
.quick-actions {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}
.action-buttons {
  display: flex;
  justify-content: space-between;
}
.action-btn {
  flex: 1;
  background-color: #4a8cff;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10rpx;
}
.action-btn .uni-icons {
  margin-right: 10rpx;
}
</style>